import { Button } from 'antd';
import React from 'react';
import OStyle from './index.less';
import { HeaderTitleProps } from './interface';

const HeaderTitle: React.FC<HeaderTitleProps> = (props) => {
  const { score, onEditMatter, onRemoveMatter, scoreLength, scoreTypeName, groupId } = props;
  return (
    <div
      className={OStyle.cus_header}
      style={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
        <p className={OStyle.header_title}>{scoreTypeName}</p>
        <p className={OStyle.row_number} style={{ marginLeft: 30 }}>
          事项小计（最高）：<span className={OStyle.number_bold}>{score || 0}</span>分
        </p>
      </div>
      <div>
        <Button
          type="text"
          size="small"
          onClick={(e: React.MouseEvent) => {
            e.stopPropagation();
            onEditMatter();
          }}
        >
          <span className="safe-edu_table_operation_text">编辑</span>
        </Button>
        <Button
          type="text"
          size="small"
          style={{ marginRight: 16 }}
          onClick={(e: React.MouseEvent) => {
            e.stopPropagation();
            onRemoveMatter({ groupId, scoreTypeName });
            // onQuestionsRemove(record.id);
          }}
        >
          <span className="safe-edu_table_operation_text">删除</span>
        </Button>
      </div>
    </div>
  );
};
export default HeaderTitle;
